<template>
	<div class="tinymce-editor">
		<editor
      :key="myKey"
			v-model="myValue"
			:init="init"
			:disabled="disabled"
			@onClick="onClick"
		>
		</editor>
	</div>
</template>

<script>
	import tinymce from 'tinymce/tinymce';
	import Editor from '@tinymce/tinymce-vue';
	import 'tinymce/themes/silver';
	import 'tinymce/icons/default';
	import 'tinymce/plugins/image'; // 插入上传图片插件
	import 'tinymce/plugins/imagetools';
	import 'tinymce/plugins/media'; // 插入视频插件
	import 'tinymce/plugins/table'; // 插入表格插件
	import 'tinymce/plugins/lists'; // 列表插件
	import 'tinymce/plugins/wordcount'; // 字数统计插件
	import 'tinymce/plugins/contextmenu'; //右键菜单插件
	import 'tinymce/plugins/colorpicker'; //选择颜色插件
	import 'tinymce/plugins/textcolor'; //文本颜色插件
	import 'tinymce/plugins/link'; //超链接插件
	import 'tinymce/plugins/code'; //代码块插件
	import 'tinymce/plugins/paste';
	import 'tinymce/plugins/fullscreen';
	import { fileUploadUrl } from '@/services/system/api';

	export default {
		components: {
			Editor,
		},
		props: {
			id: {
				type: String,
			},
			//传入一个value，使组件支持v-model绑定
			value: {
				type: String,
				default: '',
			},
			baseUrl: {
				type: String,
				default:
					process.env.VUE_APP_PUBLIC_PATH === '/'
						? ''
						: process.env.VUE_APP_PUBLIC_PATH,
			},
			fileClassCode: {
				type: String,
				default: '20',
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			plugins: {
				type: [String, Array],
				default:
					'lists image imagetools link media table textcolor wordcount contextmenu fullscreen paste colorpicker',
			},
			toolbar: {
				type: [String, Array],
				default:
					'imagetools bold italic underline strikethrough blockquote | forecolor backcolor | formatselect | fontsizeselect | fontselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | undo redo  | fullscreen',
				branding: false,
			},
			menubar: {
				type: [String, Array, Boolean],
				default: 'file edit insert view format table help',
			},
			height: {
				type: [Number, String],
				required: false,
				default: 560,
			},
		},
		data() {
			return {
        myKey:1,
				//初始化配置
				init: {
					language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
					language: 'zh_CN',
					skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
					content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
					// skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
					// content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
					height: this.height,
					plugins: this.plugins,
					toolbar: this.toolbar,
					branding: false, //隐藏品牌标识
					menubar: true, // 最上方menu菜单的显示隐藏
					toolbar_drawer: true,
					statusbar: false, // 隐藏编辑器底部的状态栏
					elementpath: false, //禁用下角的当前标签路径
					// CONFIG: Paste
					paste_retain_style_properties: 'all',
					paste_word_valid_elements: '*[*]', //word需要它
					paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
					paste_convert_word_fake_lists: false, // 插入word文档需要该属性
					paste_webkit_styles: 'all',
					paste_merge_formats: true,
					nonbreaking_force_tab: false,
					paste_auto_cleanup_on_paste: false,
					default_link_target: '_blank',
					link_title: false,
					nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
					end_container_on_empty_block: true,
					powerpaste_word_import: 'clean',
					code_dialog_height: 450,
					code_dialog_width: 1000,
					advlist_bullet_styles: 'square',
					advlist_number_styles: 'default',
					//CONFIG: Font
					fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',
					font_formats:
						"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
					images_upload_handler: (blobInfo, success) => {
						this.upload(blobInfo, (e) => {
							success(e);
						});
					},
				},
				myValue: this.value,
			};
		},
		mounted() {
      let key=this.myKey+1;
      this.myKey=key
    },
		methods: {
			//添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
			//需要什么事件可以自己增加
			onClick(e) {
				this.$emit('onClick', e, tinymce);
			},
			//可以添加一些自己的自定义事件，如清空内容
			clear() {
				this.myValue = '';
			},
			upload(blobInfo, fn) {
				let formData = new FormData();
				formData.append('file', blobInfo.blob());
				formData.append('fileClassCode', this.fileClassCode);
				formData.append(
					'uploader',
					this.$store.state.user.userInfo.fullName
				);
				formData.append(
					'uploaderId',
					this.$store.state.user.userInfo.userId
				);
				//这里为自己的上传接口调用方法
				this.$http
					.uploadAction(fileUploadUrl, formData)
					.then((res) => {
						if (res.result.file.flag) {
							let path = res.result.file.path;
							path = process.env.VUE_APP_FILE_EDITOR_URL + path;
							fn && fn(path);
						} else {
							fn && fn('上传失败，请重新上传');
						}
					})
					.catch((err) => {
						fn && fn('');
					});
			},
		},
		watch: {
			value(newValue) {
				this.myValue = newValue;
			},
			myValue(newValue) {
				this.$emit('input', newValue);
			},
		},
	};
</script>
<style scoped>
	/* .tinymce-container {
		position: relative;
	}
	.tinymce-textarea {
		visibility: hidden;
		z-index: -1;
	}
	.editor-custom-btn-container {
		position: absolute;
		right: 15px;
		z-index: 2005;
		top: 18px;
	}
	.editor-upload-btn {
		display: inline-block;
	} */
</style>
